<template>
	<view :class="bagcolor == 1 ? 'content-header' : 'active'">
		<view class="title-name">请选择收货地址</view>
		<view class="selected-address">
			<radio-group @change="radioChange">
				<view class="selected-item" v-for="(item, index) in addressList">
					<!-- <radio class="checkbox" :checked="index==current" :value="item.id"></radio> -->
					<text style="margin-right: 26rpx; margin-left: 64rpx">{{ item.name }}</text>
					<text>{{ item.phone }}</text>
					<view class="item-address">
						{{ item.provinceName + item.cityName + item.districtName + item.addressDetail }}
					</view>

					<view class="default_item">
						<!-- <view class="default" @click.stop="handleTriggerSelect(item)"
                            :class="item.isDefault == 1 ? 'selected' : ''"> -->
						<view class="default" @click.stop="defaulcClick(item)" :class="item.isDefault == 1 ? 'selected' : ''">
							<!-- <uni-icons class="selected-icon" v-if="item.isDefault == 1" type="checkbox-filled"
                                color="#ff4254" size="20"></uni-icons>
                            <uni-icons v-else type="circle" color="#ff4254" size="20"></uni-icons> -->

							<radio class="checkbox" :checked="index == current" :value="item.id"></radio>
							<!-- <view class="defaultText" v-if="item.isDefault == 1">已设为默认</view> -->
							<view class="defaultText">设为默认</view>
						</view>
					</view>

					<!-- <view class="input-wrapper">
    				    <view class="title-text">
    				       
    				            设为默认地址
    				    </view>
    				    <view class="uni-padding-wrap">
    				        
    				        <view @click.stop="confirmOrCancel">
    				            <label class="radio">
    				                <radio value="r1" :checked="index==current1" />
    				            </label>
    				        </view>
    				    </view>
    				</view> -->

					<view class="operate">
						<view style="position: absolute; right: 80rpx; top: 20rpx; color: red" @click.stop="deletFun(item.id)">删除</view>
						<view style="position: absolute; right: 0; top: 20rpx; color: #1677ff" @click.stop="topage(item.id)">编辑</view>
					</view>
				</view>
			</radio-group>
		</view>
		<view class="addAdress">
			<u-icon name="plus-circle" size="20"></u-icon>
			<text style="margin-left: 16rpx" @click="topage()">新增地址</text>
		</view>
	</view>
</template>

<script>
import address from '@/api/address.js';
export default {
	data() {
		return {
			disabled: false,
			autoplay: false,
			current1: 0,
			addressList: {
				userId: 101,
				name: '',
				phone: '',
				address: '', //请选择省市区
				detail: '', //输入详细地址
				isDefault: 1,
				province: '', //省
				city: '', //市
				area: '', //区
				provinceName: '',
				cityName: '',
				districtName: '',
				status: true,
				index: null
			},
			addressLis: [],
			current: 0 //默认选中的值
		};
	},
	mounted() {
		this.getAddressList();
		console.log(this.current, '123');
	},
	methods: {
		defaulcClick() {},
		isDefaultAddress() {
			// this.addressList.isDefault=!this.addressList.isDefault
		},
		changeAutoplay(index, current) {
			this.addressList.forEach((item, index) => {
				// console.log(item, index, "item，index");
				if (index === current) {
					this.addressList.isDefault = !this.addressList.isDefault;
					if (this.autoplay) {
						this.disabled = true;
					}
					this.autoplay = !this.autoplay;

					this.getAddressList();
				}
			});
		},
		getAddressList() {
			address
				.addressList()
				.then((res) => {
					// console.log("res=>", res);
					console.log('ksdokjosadjoasjdjsajdj');
					this.addressList = res.rows;
					// console.log(res.rows)
					this.addressList.forEach((item, index) => {
						if (item.isDefault == 1) {
							this.current = index;
						}
					});

					console.log(this.current, '索引');
				})
				.catch((erro) => {
					console.log('error');
				});
		},

		handleTriggerSelect(item) {
			// console.log(item, "item")
			if (item.isDefault == 1) {
				uni.showToast({
					title: '该地址已是默认地址',
					icon: 'none'
				});
				return;
			}
			let params = {
				...item,
				isDefault: 1
			};
			address.updateAddress(params).then((res) => {
				if (res.code == 200) {
					uni.showToast({
						title: '修改成功',
						icon: 'none'
					});
					this.getAddressList();
				}
			});
		},
		deletFun(ids) {
			address.deleteAddressIds(ids).then((res) => {
				// console.log(res);
				if (res.code == 200) {
					uni.showToast({
						title: '删除成功',
						icon: 'none'
					});
					this.getAddressList();
				}
			});
		},
		topage(id) {
			if (id) {
				uni.navigateTo({
					url: '/subPages/mine/addAdress?id=' + id
				});
			} else {
				uni.navigateTo({
					url: '/subPages/mine/addAdress'
				});
			}
		},
		radioChange(event) {
			this.addressList.forEach((item, index) => {
				if (item.id == event.detail.value) {
					if (item.isDefault == 1) {
						uni.showToast({
							title: '该地址已是默认地址',
							icon: 'none'
						});
						return;
					}
					// console.log("item",item);
					// this.current=index;
					item.isDefault = 1;
					console.log('item', item);
					// console.log(this.current,"this.current")
					address.updateAddress(item).then((res) => {
						if (res.code == 200) {
							uni.showToast({
								title: '修改成功',
								icon: 'none'
							});
							// this.getAddressList();
						}
					});
				}
			});
			// console.log(event.detail.value);
		}
	},
	onShow() {
		this.getAddressList();
	},
	// props: ['bagcolor'],

	// mounted() {
	// console.log(this.bagcolor);
	// },
	onLoad() {
		this.getAddressList();
	}
};
</script>

<style lang="scss" scoped>
.content-header {
	box-sizing: border-box;
	padding-left: 32rpx;
	padding-right: 32rpx;
}

.active {
	background-color: #f8f9ff;
	border-radius: 25rpx;
	box-sizing: border-box;
	padding: 30rpx;
}

.title-name {
	font-size: 32rpx;
	color: #333333;
	font-weight: 600;
	margin: 32rpx 0;
	margin-left: 16rpx;
}

.selected-address {
	width: 100%;
}

.item-address {
	width: 398rpx;
	margin-left: 62rpx;
	color: #777777;
}

.selected-item {
	width: 100%;
	margin: 38rpx 0;
	font-size: 30rpx;
	position: relative;
}

.checkbox {
	margin-right: 14rpx;
	margin-top: 16rpx;
}

.addAdress {
	color: #777777;
	display: flex;
}

.input-wrapper {
	display: flex;
	height: 40rpx;
	align-items: center;
	margin: 58rpx 0;
}

.title-text {
	width: 198rpx;
}

.default_item {
	width: 100%;
	height: 80rpx;
	display: flex;
	align-items: center;
	justify-content: space-between;

	.default {
		display: flex;
		align-items: center;

		color: #ff4254;
	}

	.operate {
		width: 40%;
		display: flex;
		align-items: center;
		justify-content: space-around;

		.edit {
			color: #ff4254;
		}
	}
}
</style>
